<!-- 变更 -->
<template>
    <div>
      <el-dialog title="变 更" :visible.sync="changeDialog" width="90%" >
        <div class="table-container table-css">
          <el-table :data="tableData" border :cell-class-name="cellClsNm" style="width: 100%" class="table-data"  :span-method="arraySpanMethod" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" >            
              <el-table-column prop="info" label="变更事项" align="center" min-width="150"></el-table-column>
              <el-table-column prop="subjectLeader" label="课题负责人" align="center" min-width="130">
                <template slot-scope="scope">
                  <div v-if="scope.row.info=='变更后'">
                      <el-input ></el-input>
                      <span class="small-btn">
                          <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" @click="chosePeople"/>
                      </span>
                  </div>
                  <span v-if="scope.row.info=='变更前'">{{scope.row}}</span>
                  <el-input v-if="scope.row.info=='备注'" v-model="scope.row.remark" type="textarea" :rows="3"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="finishDate" label="完成时限" align="center" min-width="200">
                  <template slot-scope="scope">
                      <el-date-picker v-if="scope.row.info=='变更后'" class="time" v-model="scope.row.finishDate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                      <span v-if="scope.row.info=='变更前'">{{scope.row}}</span>
                      
                  </template>
              </el-table-column>
              <el-table-column prop="count" label="课题名称" align="center" min-width="200">
                  <template slot-scope="scope">
                      <el-input v-if="scope.row.info=='变更后'" v-model="scope.row.fillSubjectName"></el-input>
                      <span v-if="scope.row.info=='变更前'">{{scope.row}}</span>
                  </template>
              </el-table-column>
              <el-table-column prop="count" label="预期成果" align="center" min-width="200">
                  <template slot-scope="scope">
                      <el-input v-if="scope.row.info=='变更后'" v-model="scope.row.planResult"></el-input>
                      <span v-if="scope.row.info=='变更前'">{{scope.row}}</span>
                  </template>
              </el-table-column>
              <el-table-column prop="count" label="研究内容" align="center" min-width="200">
                  <template slot-scope="scope">
                      <el-input v-if="scope.row.info=='变更后'" v-model="scope.row.researchContent"></el-input>
                      <span v-if="scope.row.info=='变更前'">{{scope.row}}</span>
                  </template>
              </el-table-column>
          </el-table>
        </div>
        <div class="button-group">
        <div class="" @click="saveChange">保存</div>
        <div class="" @click="changeDialog=false">取消</div>
        </div>
      </el-dialog>
      <!-- 选择课程负责人 -->
      <setExaminer ref="sq" :ID="ID" @saveSq="getList" title="选择课程负责人"></setExaminer>
    </div>
</template>
<script>
import setExaminer from '../../publicExams/infoList/setExaminer.vue';
import {changeSave,changeSearch} from "@/api/teachingTopic";

export default {
  data() {
    return {
      changeDialog:false,
      tableData:[],
      ID:'',

    };
  },
  props:{
    fillID:String,
  },
  components:{setExaminer},
  mounted(){
  },
  methods: {
    async initList(){
      let res = await changeSearch({fillId:this.fillID});
      if(res.code == 200){
        this.tableData = [
          {
            info:'变更前',
            ...res.data,
            remark:''
        },
        {    
          subjectLeader:'',//课题负责人
          subjectLeaderName:'',
          finishDate:'',
          fillSubjectName:'',
          planResult:'',
          researchContent:'',
          info:'变更后',
        },
        {
            info:'备注',
        }
        ]
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 2) {
            if (columnIndex === 1) {
                return [2,5];
            } 
        }
    },
    cellClsNm({column}){
      if(column.label == '变更事项'){
        return 'color'
      }
    },
    async saveChange(){
      let res = await changeSave(this.tableData);
      if(res.code == 200){
        this.$message.success(res.msg)
        this.$emit('changeInfo')
      }
    },
    chosePeople(){
        this.ID = '';
        this.$refs.sq.dialogVisible = true;
    },
    getList(){

    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin: 20px auto 60px;
  width: 85%;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/commonCss.less";
/deep/.color{
    background:rgb(237, 242, 249)!important;
    font-weight: bold;
}
.small-btn{
    position: absolute;
    right: -30px;
    top: 28px;
}
</style>